<template>
  <div class="login-container" :style="{ backgroundImage: `url(${BgLogin})` }">
    <div class="wrapper">
      <div class="welcome">HELLO</div>
      <div class="title">用户登录</div>
      <el-form ref="formRef" :model="form" label-width="0">
        <el-form-item prop="username" label="">
          <el-input v-model.trim="form.username" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item prop="password" label="">
          <el-input
            v-model.trim="form.password"
            type="password"
            placeholder="请输入密码"
            clearable
            @keyup.enter="handleLogin()"
          />
        </el-form-item>
        <el-form-item prop="code" label="">
          <el-input
            v-model.trim="form.code"
            placeholder="请输入验证码"
            clearable
            class="code-input"
            @keyup.enter="handleLogin()"
          />
          <div class="code-wrap">
            <img :src="codeImg" alt="" @click="loadCode()" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" class="login-btn" @click="handleLogin()"> 登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import BgLogin from "@/assets/bg-login.jpg";
import axios from "axios";

const loading = ref(false);
const codeImg = ref(""); // 图形验证码
const formRef = ref();
const form = ref({
  username: null,
  password: null,
  code: null,
  uuid: null,
});

async function handleLogin() {
  const userInfo = await axios.get("/api/user/info1");
  const logInfo = await axios.get("/api/log/list");
}

function loadCode() {}
</script>

<style lang="scss">
.login-container {
  .el-input {
    height: 42px;
  }

  .el-input__wrapper {
    border-radius: 5px;
  }
}
</style>
<style scoped lang="scss">
.login-container {
  width: 100%;
  height: 100vh;
  position: relative;
  @include scrollbar();
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 400px;
  //border: 1px dashed black;
  gap: 80px;
  background: white;
  padding: 20px;
  border-radius: 10px;

  .welcome {
    font-size: 30px;
    font-weight: lighter;
    color: #999;
  }

  .title {
    font-size: 20px;
    color: #444;
    margin: 0 0 30px;
    position: relative;

    &:after {
      width: 30px;
      height: 3px;
      background: $--primary-color;
      display: inline-block;
      content: "";
      position: absolute;
      left: 5px;
      bottom: -12px;
    }
  }
}

.logo-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;

  img {
    width: 40px;
    height: 40px;
  }

  .text {
    font-weight: bold;
    font-size: 24px;
    color: #444;
  }
}

.card-wrapper {
  margin-top: 40px;

  img {
    height: 280px;
  }
}

.code-input {
  width: 248px;
}

.code-wrap {
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  height: 42px;
  width: 100px;
  text-align: center;
  margin-left: 10px;
  background: white;

  img {
    height: 100%;
  }
}

.login-btn {
  width: 100%;
  //margin-top: 20px;
  height: 42px;
  margin-top: 10px;
  background: #3f3f3f;
  border: none;
}

.forget-wrap {
  //border: 1px dashed black;
  text-align: left;
  position: relative;
  top: -12px;

  .password-find {
    color: #666;
    text-decoration: underline;
    font-size: 13px;
    cursor: pointer;

    &:hover {
      color: $--primary-color;
    }
  }
}
</style>
